<template>
    <div class="container">
        <header>
            <div>
                <img src="../assets/back.svg" alt="" @click="goBack">
                <span>确认订单</span>
                <div>
                    <img src="../assets/time.svg" alt="">
                    <van-count-down :time="time" @finish="onCountDownFinish" />
                </div>
            </div>
        </header>
        <div class="wrap">
            <div class="wrap-con">
                <div class="card">
                    <div>
                        <img :src="$buildFullImageUrl + filmData.pic" alt="">
                        <div>
                            <div>
                                <div>
                                    <div>{{ showData.film_name }}</div>
                                    <div>{{ seatesPrice.length }}张</div>
                                </div>
                                <div>原价 ¥ {{ $route.query.totalPrice }}</div>
                            </div>
                            <div>
                                {{ formatShowTime(showData) }} {{ showData.version_type }}
                            </div>
                            <div>{{ showData.cinema_name }}</div>
                            <div>{{ showData.hall_name }}</div>
                        </div>
                    </div>
                </div>
                <div class="hasSelect">
                    <div class="hasSelectSeats" v-for="(item, index) in seatesPrice" :key="index">
                        <div class="seat_names">
                            <div>{{ item.seat_name }}</div>
                            <div> {{ item.price }}</div>
                        </div>
                    </div>
                </div>
                <div class="sel-card">
                    <div v-for="(item, index) in cardList" :key="index">
                        <div class="sel-card-con" v-if="item.cardMode == 1" style="margin-top: 20px">
                            <div>
                                <img src="../assets/mine/card.svg" alt="">
                                <div class="con">
                                    <div class="card-number">卡号：{{ item.cardNo }}</div>
                                    <div>
                                        <span>职工观影兑换卡</span>
                                        <span>剩余{{ item.balance }}次</span>
                                    </div>
                                    <div>
                                        <span>有效期至</span>
                                        <span>{{ item.validEndDate }}</span>
                                    </div>
                                </div>
                            </div>
                            <van-checkbox :value="isCardSelected(item.id)"
                                @click="selectPayment('card', item.cardMode, item)">
                            </van-checkbox>
                        </div>
                        <div class="sel-card-con" style="margin-top: 20px" v-if="item.cardMode == 2">
                            <div>
                                <img src="../assets/mine/card.svg" alt="">
                                <div class="con">
                                    <div class="card-number">卡号：{{ item.cardNo }}</div>
                                    <div>
                                        <span>积分</span>
                                        <span>剩余{{ item.balance }}积分</span>
                                    </div>
                                    <div>
                                        <span>有效期至</span>
                                        <span>{{ item.validEndDate }}</span>
                                    </div>
                                </div>
                            </div>
                            <van-checkbox :value="isCardSelected(item.id)"
                                @click="selectPayment('points', item.cardMode, item)">
                            </van-checkbox>
                        </div>
                    </div>
                </div>
            </div>
            <div class="know">
                <div>兑换须知</div>
                <div>
                    <div>1.请确认场次和时间无误,购买成功后将不予退换</div>
                    <div>2.由于设备故障等不可抗力因素,存在少量场次取消的情况,会进行退票退款 </div>
                    <div>3.由于影院系统不稳定等因素,存在出票失败的情况,会进行退款</div>
                    <div>4.取票码可以在“我的-电影票”中查看</div>
                    <div>
                        5.下单即代表你同意
                        <span style="color: #42a5f5">《用户服务协议》</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom-btn">
            <div></div>
            <div>
                <div>
                </div>
                <div @click="nowBuy">
                    立即兑换
                </div>
            </div>
        </div>
        <van-popup round v-model="show" position="bottom">
            <div class="dialog_data">
                <div class="title">
                    <span>价格明细</span>
                    <!--                  <van-icon @click="show = false" name="close" color="rgb(204,204,204)" />-->
                </div>
                <div v-for="(item, index) in seatDeductions" :key="index" class="detailList">
                    <div>
                        <div class="flex_data">
                            <div>座位号：</div>
                            <div>{{ item.seat_name }}</div>
                        </div>
                    </div>
                    <!-- <div>
                        <div class="flex_data">
                            <div>抵扣的金额 ：</div>
                            <div>{{ item.deduction }}</div>
                        </div>
                    </div> -->
                    <div>
                        <div class="flex_data flex_data-money" style="margin-top: 8px;">
                            <div>原价：</div>
                            <div>
                                <span>{{ item.seatPrice }}</span>
                            </div>

                        </div>
                        <div style="margin-top: 8px;" class="flex_data flex_data-money">
                            <div>抵扣的金额 ：</div>
                            <div>
                                <span>{{ item.deduction || 0 }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- <div class="flex-btn flex_data">
                    <div class="realPay">
                        实际支付： ￥{{ totalPay }}
                    </div>
                    <div @click="goPay" class="gopays">
                        去支付
                    </div>
                </div> -->

                <div class="bottom-btn">
                    <div>￥{{ totalPay }}</div>
                    <div>
                        <div>
                        </div>
                        <!-- <div @click="goPay">
                            去支付
                        </div> -->
                        <div class="pay-btn" :class="{ loading: paymentLoading }" @click="goPay">
                            <van-loading v-if="paymentLoading" type="spinner" size="20px" />
                            <span v-else>去支付</span>
                        </div>
                    </div>
                </div>
            </div>
        </van-popup>

    </div>
</template>
<script>
import { Toast } from 'vant';
import wechatPay from '@/utils/wechatPay';
import plantAPI from "@/api/plant";
export default {
    data() {
        return {
            paymentLoading: false,
            paymentLock: false,
            paramsData: {},
            show: false,
            seatDeductions: [],
            totalPay: '',
            selectedCardMode: null,
            selectedCards: [],
            time: 10 * 60 * 1000,
            selectedPayment: '', // 'card' 或 'points'
            showData: {},
            filmData: {},
            seatesPrice: [],
            cardList: [],
            hasEnoughPointsCard: false,
            originalPrice: 0,
            isManualAction: false,
            isPaying: false,
            settleAmount: 0,
            orderNo: ''
        }
    },
    created() {
        // this.showData = JSON.parse(this.$route.query.showData)
        // this.filmData = JSON.parse(this.$route.query.filmData)
        // this.seatesPrice = JSON.parse(this.$route.query.seatesPrice)
        // this.originalPrice = parseFloat(this.$route.query.totalPrice) || 0

        // 取出整包数据
        const payData = JSON.parse(sessionStorage.getItem('payData') || '{}');

        // 赋值给对应字段
        this.showData = payData.showData || {};
        this.filmData = payData.filmData || {};
        this.seatesPrice = payData.seatesPrice || [];
        this.originalPrice = Number(payData.totalPrice || 0);
        this.settleAmount = Number(payData.settle_amount || 0);
        this.orderNo = payData.order_no || '';

        // 如果后续不再需要，可立即清理
        sessionStorage.removeItem('payData');

        plantAPI.cardList().then(res => {
            this.cardList = res.rows
        })
        // if (!wechatPay.isWechat()) {
        //     Dialog.alert({
        //         title: '提示',
        //         message: '请在微信浏览器中打开页面进行支付',
        //     }).then(() => {
        //         // this.$router.go(-1);
        //     });
        // }
    },
    computed: {
        selectedCardTypes() {
            if (this.selectedCards.length === 0) return [];
            const modes = new Set();
            this.cardList.forEach(card => {
                if (this.selectedCards.includes(card.id)) {
                    modes.add(card.cardMode);
                }
            });
            return Array.from(modes);
        },
        totalSelectedPoints() {
            if (this.selectedCardMode !== 2) return 0;
            return this.selectedCards.reduce((total, cardId) => {
                const card = this.cardList.find(c => c.id === cardId);
                return total + (card ? card.balance : 0);
            }, 0);
        },
        isPointsEnough() {
            return this.totalSelectedPoints >= this.originalPrice;
        },
        isFirstCardEnough() {
            if (this.selectedCards.length === 0 || this.selectedCardMode !== 2) return false;
            const firstCard = this.cardList.find(c => c.id === this.selectedCards[0]);
            return firstCard && firstCard.balance >= this.originalPrice;
        }
    },
    methods: {
        onCountDownFinish() {
            if (!this.isManualAction) {
                this.$router.push('/my-order');
            }
        },
        payDetail() {
            this.seatDeductions.forEach(item => {
                this.seatesPrice.forEach(items => {
                    if (item.seatId == items.seat_id) {
                        item.seat_name = items.seat_name
                    }
                })
            });
        },
        goBack() {
            this.$router.push({
                path: '/home'
            })
        },
        // selectPayment(type, cardMode, item) {
        //     this.totalPay = ''
        //     if (this.selectedCardMode && this.selectedCardMode !== cardMode) {
        //         this.$toast(`请勿选择不同类型的卡`);
        //         return;
        //     }
        //     const index = this.selectedCards.indexOf(item.id);

        //     if (cardMode == 1) {
        //         if (index === -1) {
        //             this.selectedCards = [item.id];
        //             this.selectedCardMode = cardMode;
        //         } else {
        //             this.selectedCards = [];
        //             this.selectedCardMode = null;
        //         }
        //     } else {
        //         if (index === -1) {
        //             if (this.hasEnoughPointsCard) {
        //                 this.$toast('当前积分卡已足够支付，无需选择更多');
        //                 return;
        //             }
        //             this.selectedCards.push(item.id);
        //             this.selectedCardMode = cardMode;
        //             const selectedCard = this.cardList.find(c => c.id === item.id);
        //             if (selectedCard && selectedCard.balance >= this.originalPrice) {
        //                 this.hasEnoughPointsCard = true;
        //             }
        //         } else {
        //             this.selectedCards.splice(index, 1);
        //             if (this.selectedCards.length === 0) {
        //                 this.selectedCardMode = null;
        //                 this.hasEnoughPointsCard = false;
        //             } else {
        //                 const total = this.selectedCards.reduce((sum, id) => {
        //                     const card = this.cardList.find(c => c.id === id);
        //                     return sum + (card ? card.balance : 0);
        //                 }, 0);
        //                 this.hasEnoughPointsCard = total >= this.originalPrice;
        //             }
        //         }
        //     }
        // },


        selectPayment(type, cardMode, item) {
            // 如果已经选择了卡且类型不同，提示用户
            if (this.selectedCardMode && this.selectedCardMode !== cardMode) {
                this.$toast(`请勿选择不同类型的卡`);
                return;
            }

            // 检查是否已经选择了当前卡
            const index = this.selectedCards.indexOf(item.id);

            if (index === -1) {
                // 如果没选择，清空之前的选择，选择当前卡
                this.selectedCards = [item.id];
                this.selectedCardMode = cardMode;

                // 如果是积分卡，检查是否足够支付
                if (cardMode === 2) {
                    const selectedCard = this.cardList.find(c => c.id === item.id);
                    this.hasEnoughPointsCard = selectedCard && selectedCard.balance >= this.originalPrice;
                }
            } else {
                // 如果已经选择了当前卡，取消选择
                this.selectedCards = [];
                this.selectedCardMode = null;
                this.hasEnoughPointsCard = false;
            }
        },
        async goPay() {
            // 双重检查防止重复提交
            if (this.paymentLock) return;
            if (this.paymentLoading) return;

            this.paymentLock = true;
            this.paymentLoading = true;
            try {
                Toast.loading({
                    message: '支付处理中...',
                    forbidClick: true,
                    duration: 0
                });
                if (this.totalPay == 0) {
                    const prepayRes = await plantAPI.prepayconfirm({
                        orderNo: this.orderNo,
                        seatDeductions: this.seatDeductions,
                        totalPrice: this.settleAmount
                    });

                    if (JSON.parse(prepayRes.data.body).code == 200) {
                        Toast.success('支付成功');
                        this.show = false;
                        this.$router.push({
                            path: '/orderDetail',
                            query: {
                                orderNo: this.orderNo
                            }
                        })
                    } else {
                        Toast.fail(JSON.parse(prepayRes.data.body).msg);
                    }

                } else if (this.totalPay > 0) {
                    const paymentRes = await plantAPI.prepayment({
                        description: "预支付",
                        outTradeNo: this.orderNo,
                        seatDeductions: this.seatDeductions,
                        totalFee: this.totalPay,
                        tradeType: 1,
                        wxOpenId: localStorage.getItem("openId")
                    });
                    this.paramsData = paymentRes.data;
                    this.show = false;
                    await this.handlePay(this.orderNo);
                }
            } catch (error) {
                Toast.fail('支付失败，请重试');
            } finally {
                this.paymentLoading = false;
                // 延迟解锁，防止快速连续点击
                setTimeout(() => {
                    this.paymentLock = false;
                }, 1000);
                Toast.clear();

            }
        },
        async nowBuy() {
            this.isManualAction = true;
            if (this.selectedCardMode === null) {
                this.$toast('请选择支付方式');
                return;
            }
            try {
                const seatInfo = this.seatesPrice.map(seat => ({
                    seatId: seat.seat_id,
                    seatPrice: seat.price
                }));
                const res = await plantAPI.getAdditionalAmount({
                    cardIds: this.selectedCards,
                    seatInfoList: seatInfo,
                    cardMode: this.selectedCardTypes[0]
                });

                this.totalPay = res.data.totalPay;
                this.seatDeductions = res.data.seatDeductions;
                this.payDetail()
                this.show = true;
            } catch (error) {
                Toast.fail('支付失败，请重试');
            }
        },
        async handlePay(order_no) {
            try {
                // 2. 调用微信支付
                const paySuccess = await wechatPay.pay({
                    package: this.paramsData.packageVal,
                    appId: this.paramsData.appId,
                    nonceStr: this.paramsData.nonceStr,
                    paySign: this.paramsData.paySign,
                    signType: this.paramsData.signType,
                    timeStamp: this.paramsData.timeStamp,
                });

                if (paySuccess) {
                    // 3. 支付成功处理
                    Toast.success('支付成功');
                    setTimeout(() => {
                        this.$router.push({
                            path: '/my-order',
                        });
                    }, 1000)

                }
            } catch (error) {
            } finally {
            }
        },
        isCardSelected(id) {
            return this.selectedCards.includes(id);
        },
        formatShowTime(showData) {
            if (!showData || !showData.show_date || !showData.show_time || !showData.close_time) {
                return '';
            }
            // 解析日期
            const showDate = new Date(showData.show_date);
            const showTime = new Date(showData.show_time);
            const closeTime = new Date(showData.close_time);
            // 获取今天的日期
            const today = new Date();
            today.setHours(0, 0, 0, 0);
            // 计算日期差
            const diffDays = Math.floor((showDate - today) / (1000 * 60 * 60 * 24));
            // 确定日期显示文本
            let dateText = '';
            if (diffDays === 0) {
                dateText = '今天';
            } else if (diffDays === 1) {
                dateText = '明天';
            } else if (diffDays === 2) {
                dateText = '后天';
            } else {
                const weekDays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
                dateText = weekDays[showDate.getDay()];
            }
            // 获取月份和日期
            const month = showDate.getMonth() + 1;
            const day = showDate.getDate();
            // 获取小时和分钟
            const startHours = showTime.getHours().toString().padStart(2, '0');
            const startMinutes = showTime.getMinutes().toString().padStart(2, '0');
            const endHours = closeTime.getHours().toString().padStart(2, '0');
            const endMinutes = closeTime.getMinutes().toString().padStart(2, '0');

            return `${dateText} ${month}月${day}日 ${startHours}:${startMinutes}-${endHours}:${endMinutes}`;
        }
    }
}
</script>
<style lang="scss" scoped>
.pay-btn {
    &.loading {
        opacity: 0.7;
        pointer-events: none;
    }
}

::v-deep .van-count-down {
    color: #fff !important;
}

.dialog_data {
    width: 100%;
    height: 100%;
    color: #666;
    font-size: 14px;
    background: #fafafa;
    text-align: center;
    padding: 18px 12px;
    box-sizing: border-box;

    .detailList {
        width: 100%;
        margin: auto;
        background: #fff;
        border-radius: 6px;
        margin-top: 10px;
        padding: 10px 20px;
        box-sizing: border-box;
        padding-bottom: 10px;
        // border-bottom: 1px solid #eae9e9;

        >div {
            margin-top: 5px;
            width: 100%;
            text-align: left;
            font-size: 14px;
            font-weight: bold;
        }

        .flex_data-money:nth-child(1) {
            >div:nth-child(2) {
                display: flex;
                align-items: center;

                ::v-deep .van-icon {
                    color: #666666;
                }

                >span:nth-child(1) {
                    margin: 0 1px 0 0;
                    font-size: 14px;
                    font-weight: bold;
                }

                >span:nth-child(2) {
                    font-size: 18px;
                    font-weight: bold;
                }
            }
        }

        .flex_data-money:nth-child(2) {
            >div:nth-child(2) {
                display: flex;
                align-items: center;

                >span:nth-child(1) {
                    font-size: 14px;
                    font-weight: bold;
                }

                >span:nth-child(2) {
                    color: rgba(251, 55, 119, 1);
                    font-size: 18px;
                    font-weight: bold;
                    margin-left: 1px;
                }
            }
        }

    }

    .detailList:nth-last-child(1) {
        border: none !important;
    }



    .flex-btn {
        width: 100%;
        padding-top: 10px;
        display: flex;
        // flex-direction: row-reverse;

        .gopays {
            margin-left: 18px;
            border-radius: 20px;
            width: 160px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: rgba(255, 255, 255, 1);
            font-size: 16px;
            background-color: rgba(251, 55, 119, 1);
        }

        .realPay {
            font-weight: bold;
            border-radius: 20px;
            width: 160px;
            color: #000;
            font-size: 16px;

        }
    }

    .title {
        width: 70px;
        color: #000;
        font-size: 16px;
        font-weight: bold;
        margin: 0 auto 10px;
        text-align: center;
        display: flex;
        justify-content: space-between;
    }
}

.container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: rgba(245, 245, 245, 1);
    position: relative;
    overflow: hidden;

    header {
        width: 100%;
        height: 139px;
        background: linear-gradient(94deg, rgba(238, 71, 59, 0.05) 0%, #f6766d 58%, rgba(238, 71, 59, 0.3) 100%);
        opacity: 0.8;
        position: relative;

        >div {
            width: 100%;
            padding: 20px 16px;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;

            >img:first-child {
                width: 20px;
                height: 20px;
                flex-shrink: 0;
            }

            >span {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                color: rgb(255, 255, 255);
                font-size: 17px;
            }

            >div:last-child {
                display: flex;
                align-items: center;
                flex-shrink: 0;

                img {
                    width: 16px;
                    height: 16px;
                }

                .van-count-down {
                    color: #fff !important;
                    font-size: 14px;
                    margin-left: 5px;
                }
            }
        }
    }

    .bottom-btn {
        width: 100%;
        position: sticky;
        bottom: 0;
        z-index: 100;
        height: 61px;
        background: #FFFFFF;
        display: flex;
        padding: 0 17px;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;

        >div:nth-child(1) {
            color: rgba(251, 55, 119, 1);
            font-size: 16px;
            font-weight: bold;
        }

        >div:nth-child(2) {
            display: flex;
            align-items: center;

            >div:nth-child(1) {
                color: rgba(186, 186, 186, 1);
                font-size: 12px;
                display: flex;
                align-items: center;

                img {
                    width: 10px;
                    height: 10px;
                    margin-left: 5px;
                }
            }

            >div:nth-child(2) {
                margin-left: 18px;
                border-radius: 20px;
                width: 160px;
                height: 40px;
                line-height: 40px;
                text-align: center;
                color: rgba(255, 255, 255, 1);
                font-size: 16px;
                background-color: rgba(251, 55, 119, 1);
            }
        }
    }

    .wrap {
        z-index: 111;
        flex: 1;
        /* 占据剩余空间 */
        overflow-y: auto;
        /* 启用纵向滚动 */
        padding: 0 13px;
        padding-bottom: 20px;
        /* 给底部按钮留出空间 */
        margin-top: -70px;
        /* 保持与header的重叠效果 */
        -webkit-overflow-scrolling: touch;
        /* iOS平滑滚动 */

        .wrap-con {
            width: 100%;
            background: #FFFFFF;
            border-radius: 8px;
            margin-bottom: 10px;
        }

        .card {
            width: 100%;
            padding: 0 10px;
            box-sizing: border-box;

            >div:nth-child(1) {
                width: 100%;
                padding: 20px 0 30px 0;
                display: flex;

                >img:nth-child(1) {
                    width: 78px;
                    height: 100px;
                    border-radius: 4px;
                }

                >div:nth-child(2) {
                    width: calc(100% - 81px);
                    margin-left: 10px;

                    >div:nth-child(1) {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        >div:nth-child(1) {
                            display: flex;
                            align-items: center;

                            >div:nth-child(1) {
                                width: 125px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                color: rgb(16, 16, 16);
                                font-size: 16px;
                                font-weight: bold;
                                margin-right: 5px;
                            }

                            >div:nth-child(2) {
                                color: rgb(51, 51, 51);
                                font-size: 14px;
                            }
                        }

                        >div:nth-child(2) {
                            color: rgba(51, 51, 51, 1);
                            font-size: 14px;
                        }
                    }

                    >div:nth-child(2),
                    >div:nth-child(3),
                    >div:nth-child(4) {
                        font-size: 12px;
                        text-align: left;
                        color: rgba(102, 102, 102, 1);
                        margin-top: 5px;
                    }
                }
            }
        }

        .hasSelect {
            display: flex;
            align-items: center;
            margin-left: 6px;
            overflow-x: auto;
            /* 添加横向滚动 */
            white-space: nowrap;
            /* 防止子元素换行 */
            // padding-bottom: 10px;
            /* 为滚动条留出空间 */
            -webkit-overflow-scrolling: touch;
            /* iOS平滑滚动 */

            .hasSelectSeats {
                display: inline-flex;
                /* 改为行内flex布局 */
                align-items: center;
                padding: 0 10px;
                height: 46px;
                background: #F6F6F6;
                border-radius: 6px;
                margin-right: 8px;
                flex-shrink: 0;
                /* 防止元素被压缩 */
                cursor: pointer;
            }

            .line {
                width: 0px;
                height: 32px;
                border: 0.5px solid #D1D1D1;
                margin: 0 5px;
            }

            .seat_names {
                text-align: center;
                padding-right: 10px;

                >div:first-child {
                    height: 18px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    font-size: 13px;
                    color: #1A1A1A;
                }

                >div:last-child {
                    height: 17px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    font-size: 12px;
                    color: #1A1A1A;
                }
            }
        }

        .sel-card {
            width: calc(100% - 30px);
            padding: 0px 10px 20px 10px;
            box-sizing: border-box;
            margin: auto;

            .sel-card-con {
                width: 100%;
                display: flex;
                justify-content: space-between;

                >div:nth-child(1) {
                    width: calc(100% - 25px);
                    display: flex;
                    align-items: center;

                    img {
                        width: 24px;
                        height: 24px;
                    }

                    .con {
                        margin-left: 13px;

                        .card-number {
                            font-size: 14px;
                            color: #000;
                            margin: 4px 0;
                            // word-break: break-all; /* 长卡号自动换行 */
                        }

                        >div:nth-child(2) {
                            display: flex;
                            align-items: center;

                            span:nth-child(1) {
                                color: rgb(16, 16, 16);
                                font-size: 14px;
                            }

                            span:nth-child(2) {
                                margin-top: 10px;
                                color: rgb(186, 186, 186);
                                font-size: 14px;
                                margin-left: 27px;
                            }
                        }

                        >div:nth-child(3) {
                            display: flex;
                            align-items: center;

                            span:nth-child(1) {
                                color: rgb(186, 186, 186);
                                font-size: 14px;
                            }

                            span:nth-child(2) {
                                color: #72b311;
                                font-size: 14px;
                                margin-left: 10px;
                            }
                        }
                    }
                }

            }
        }

        .know {
            width: calc(100% - 30px);
            margin: 10px auto 0;
            border-top: 1px solid rgba(206, 206, 206, 1);

            >div:nth-child(1) {
                width: 100%;
                color: rgb(51, 51, 51);
                font-size: 14px;
                text-align: left;
                font-weight: bold;
                margin-top: 10px;
            }

            >div:nth-child(2) {
                width: 100%;
                margin-top: 29px;

                >div {
                    color: rgba(102, 102, 102, 1);
                    font-size: 13px;
                    text-align: left;
                    margin-bottom: 10px;
                }
            }
        }
    }
}
</style>
